<script setup>
import { ref } from 'vue'
const vehicleArr = ref([
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'},
  {brand: '奔驰', type: '梅赛德斯-迈巴赫S级轿车', price: '￥ 1,000,000'}
])

const handleDelete = (index, row) => {
  if(confirm('确定要删除'+row.brand+'吗？')){
    vehicleArr.value.splice(index, 1)
    alert('删除成功')
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!--侧边栏-->
      <el-aside width="200px" style="background-color: #d3dce6">
        <el-menu>
          <el-menu-item index="1">员工管理</el-menu-item>
          <el-menu-item index="2">车辆管理</el-menu-item>
          <el-menu-item index="3">围栏管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="background-color: yellow;">
          <h1 style="background-color: #0aa1ed;color: #FFF">智慧车辆管理系统-IVOS</h1>
        </el-header>
        <el-main>
          <el-table :data="vehicleArr">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="brand" label="品牌"></el-table-column>
            <el-table-column prop="type" label="型号"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>

</style>